import React, { forwardRef, useState, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
const UserForm = forwardRef((props, ref) => {
    // 是否禁用区域框
    const [isDisabled, setIsDisabled] = useState(false)
    // 获取组件传来是否禁用区域
    useEffect(() => {
        setIsDisabled(props.isUpdateDisable)
        // console.log(props,'props');
        // console.log(props.isUpdateDisable,'props更新了');
    }, [props])

    // 获取当前用户token信息
    const { roleId, region } = JSON.parse(localStorage.getItem("token"))

    // 定义角色信息
    const roleObj = {
        "1": "superadmin",
        "2": "admin",
        "3": "editor",

    }
    // 区域，检查修改添加用户权限,判断是否禁用区域选项
    const checkRegionDisabled = (item) => {
        // 判断是添加或修改用户
        if (props.isUpdate) {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return true
            }
        } else {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return item.value !== region
            }
        }
    }
    // 角色，检查修改添加用户权限,判断是否禁用角色选项
    const checkRoleDisabled = (item) => {
        // 判断是添加或修改用户
        if (props.isUpdate) {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return true
            }
        } else {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return roleObj[item.id] !== "editor"
            }
        }
    }
    // 新的区域数据
    const newRegionList = props.regionList.map((option) => ({
        ...option,
        disabled: checkRegionDisabled(option)
    }))

    // 新的角色数据
    const newRoleList = props.roleList.map((option) => ({
        ...option,
        disabled: checkRoleDisabled(option)
    }))

    // 角色选择变化
    const roleChange = (value) => {
        if (value === 1) {
            setIsDisabled(true)
            // console.log(ref);
            ref.current.setFieldsValue({
                region: ""
            })
        } else {
            setIsDisabled(false)
        }
        // console.log(value, 'rolechange');
    }

    return (
        <div>
            <Form
                ref={ref}
                name="添加用户信息"
                layout="vertical"
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="区域"
                    name="region"
                    rules={isDisabled ? [] : [
                        {
                            required: true,
                            message: 'Please input your region!',
                        },
                    ]}
                >
                    <Select
                        disabled={isDisabled}
                        options={newRegionList}
                    />
                </Form.Item>
                <Form.Item
                    label="角色"
                    name="roleId"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your role!',
                        },
                    ]}
                >
                    <Select
                        defaultValue="角色选择"
                        onChange={(value) => roleChange(value)}
                        options={newRoleList}
                    />
                </Form.Item>
            </Form>
        </div>
    )
}
)
export default UserForm